﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    	
        <script src="../../js/jquery.min.js"></script>
		<script src="../../js/jquery.Jcrop.js"></script>
        <script src="https://raw.github.com/malsup/form/master/jquery.form.js" type="text/javascript"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

		<script language="Javascript">
		    var jcrop_api, boundx, boundy;
		    $(document).ready(function () {

               

		        function CutImage() { 
                    
                     $.ajax({
		            url: "/Image/UploadHeadImage",
		            dataType: "json",
		            success: function (data) {
		                $('#cropbox').attr('src', data.headimage);
		                $('#preview').attr('src', data.headimage);
		                $('#filename').val(data.headimage);
		                $('#cropbox').Jcrop({
		                    aspectRatio: 1,
		                    onSelect: updateCoords,
		                    onRelease: clearCoords
		                }, function () {
		                    var bounds = this.getBounds();
		                    boundx = bounds[0];
		                    boundy = bounds[1];
		                    jcrop_api = this;
		                });
		            }, error: function () { alert('b'); }
		        });
		    });
                    return false;

                }//end cutimage

		       

		    function clearCoords() {
		        $('form input').val('');
		    };

		    function updateCoords(c) {
		        $('#x').val(c.x);
		        $('#y').val(c.y);
		        $('#w').val(c.w);
		        $('#h').val(c.h);
		        if (parseInt(c.w) > 0) {
		            var rx = 100 / c.w;
		            var ry = 100 / c.h;

		            $('#preview').css({
		                width: Math.round(rx * boundx) + 'px',
		                height: Math.round(ry * boundy) + 'px',
		                marginLeft: '-' + Math.round(rx * c.x) + 'px',
		                marginTop: '-' + Math.round(ry * c.y) + 'px'
		            });
		        }
		    };

		    function checkCoords() {
		        var width = parseInt($('#w').val());
		        if (width)
		            if (width < 10)
		                alert('选择的区域不能小于10个像素'); //这是我额外增加的判断规则
		            else
		                return true; //开始POST数据，这里可以改成AJAX请求，以地址形式处理后图片地址返回再处理HTML
		        else
		            alert('请选择要截图的区域');
		        return false;
		    };
		    //JS部分基本不用改动，只要把HTML和JS部分嵌入应该就没有问题了
		</script>
</head>
<body>



    <form id="upload" onsubmit="return CutImage();" action="/Image/UploadHeadImage" method="post" enctype="multipart/form-data">
   <input type="file" name="Filedata" id="File1" />
    <input type="submit" value="Upload" />
   </form>
  
    <table style="display:none">
			<tr>
				<td>
					<img src="" id="cropbox" alt="Flowers" />
				</td>
				<td>
					<div style="width:100px;height:100px;overflow:hidden;">
						<img src="" id="preview" alt="Preview" />
					</div>
				</td>
			</tr>
		</table>

		<!-- 这也是要嵌入的部分，提交给服务器的点坐标都在这里生成 -->
		<form style="display:none" action="/Image/CutHeadImage" method="post" onsubmit="return checkCoords();">
			<input type="hidden" id="x" name="x" />
			<input type="hidden" id="y" name="y" />
			<input type="hidden" id="w" name="width" />
			<input type="hidden" id="h" name="height" />
            <input type="hidden" id="filename" name="filename" />
			<input type="submit" value="截图" />
		</form>

</body>
</html>
